<template>
	<div class="box header">
		<!-- 左边区域 -->
		<div class="left" @click="detail">
			<van-image
				round
				width="0.5rem"
				height="0.5rem"
				:src="userinfo.userPic"
			/>
		</div>
		<!-- 右边区域 -->
		<h3 class="m-l-10" @click="detail" v-if="userinfo.userName">
			欢迎您, {{ userinfo.userName }}
		</h3>
		<h3 class="m-l-10" v-else @click="login">请登录</h3>
	</div>
</template>
<script>
import { getUserInfo } from "@/api/user"
export default {
	data() {
		return {
			userinfo: {}
		}
	},
	mounted() {
		getUserInfo({
			userId: sessionStorage.getItem('userId')
		}).then(res => {
			if (res.data.code == 200) {
				this.userinfo = Object.assign({}, this.userinfo, res.data.data)
				if (this.userinfo.userPic) {
					this.userinfo.userPic = this.imgurl + res.data.data.userPic
				}
			}
		})
	},
	methods: {
		detail() {
			if (this.userinfo.userName) {
				this.$router.push({
					name: 'userinfo'
				})
			} else {
				this.login()
			}
		},
		login() {
			this.$router.push({
				name: 'login'
			})
		}
	}
}
</script>

<style scoped>
.box {
	width: 100%;
	height: 0.9rem;
	display: flex;
	background: linear-gradient(to bottom, #567ac2, #a6b8dd);
}
.box.header {
	position: sticky;
	top: 0;
	left: 0;
}
/* 左边区域 */
.left {
	width: 17%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 0.05rem;
}
.avatar {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
}
/* 右边区域 */
h3 {
	width: 83%;
	height: 100%;
	line-height: 0.5rem;
	font-size: 0.27rem;
	display: flex;
	align-items: center;
}
</style>